<template>
  <div class="assessment-table-container">
    <table class="assessment-table">
      <!-- 表头部分 -->
      <thead>
        <tr>
          <th rowspan="1">项目</th>
          <th colspan="4">评分标准</th>
          <th v-for="(date, index) in dateColumns" :key="index" rowspan="2">
            {{ formatDate(date) }}
          </th>
        </tr>
        <tr>
          <th>日常活动项目</th>
          <th>独立</th>
          <th>部分独立或需要部分帮助</th>
          <th>需要大帮助</th>
          <th>完全依赖</th>
        </tr>
      </thead>

      <!-- 表格内容 -->
      <tbody>
        <tr v-for="item in assessmentItems" :key="item.id">
          <td>{{ item.activity }}</td>
          <td>{{ item.criteria.independent }}</td>
          <td>{{ item.criteria.partial }}</td>
          <td>{{ item.criteria.needHelp }}</td>
          <td>{{ item.criteria.dependent }}</td>
          <td v-for="(date, dateIndex) in dateColumns" :key="dateIndex">
            {{ getScore(item.id, dateIndex) }}
          </td>
        </tr>
      </tbody>

      <!-- 底部总评分和签名 -->
      <tfoot>
        <tr>
          <td colspan="5">总评分</td>
          <td v-for="(total, index) in totalScores" :key="index">
            {{ total }}
          </td>
        </tr>
        <tr>
          <td colspan="5">签名</td>
          <td v-for="(signature, index) in signatures" :key="index">
            {{ signature }}
          </td>
        </tr>
      </tfoot>
    </table>

    <div class="mt-5 f-12 lh-18">
      日常生活功能评估:满分100分。<br />

      如果总分&lt;60分，需要协助完成日常生活评分结果;<br />
      &lt;20分为极严重功能缺陷，生活完全需要依赖;<br />

      20-40分为生活需要很大帮助;<br />

      40-60分为需要帮助;<br />

      &gt;60分为生活基本自理;<br />

      Barthel指数得分40以上者康复治疗的效益最大。
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import axios from 'axios'

export default {
  setup() {
    // 静态数据 - 活动项目和评分标准
    const assessmentItems = ref([
      {
        id: 1,
        activity: '进餐',
        criteria: { independent: '10', partial: '5', needHelp: '0', dependent: '' },
      },
      {
        id: 2,
        activity: '洗澡',
        criteria: { independent: '5', partial: '0', needHelp: '', dependent: '' },
      },
      {
        id: 3,
        activity: '修饰(洗脸、刷牙、刮脸、梳头)',
        criteria: { independent: '5', partial: '0', needHelp: '', dependent: '' },
      },
      {
        id: 4,
        activity: '穿衣(包括系鞋带等)',
        criteria: { independent: '10', partial: '5', needHelp: '0', dependent: '' },
      },
      {
        id: 5,
        activity: '可控制大便',
        criteria: {
          independent: '10',
          partial: '5(每周小于1次失控)',
          needHelp: '0(失控)',
          dependent: '',
        },
      },
      {
        id: 6,
        activity: '可控制小便',
        criteria: {
          independent: '10',
          partial: '5(每24h小于1次失控)',
          needHelp: '0(失控)',
          dependent: '',
        },
      },
      {
        id: 7,
        activity: '用厕(包括擦净、整理衣裤、冲水)',
        criteria: { independent: '10', partial: '5', needHelp: '0', dependent: '' },
      },
      {
        id: 8,
        activity: '桌旁椅移动',
        criteria: { independent: '15', partial: '10', needHelp: '5', dependent: '0' },
      },
      {
        id: 9,
        activity: '平地行走45M',
        criteria: { independent: '15', partial: '10', needHelp: '5', dependent: '0' },
      },
      {
        id: 10,
        activity: '上下楼梯',
        criteria: { independent: '10', partial: '5', needHelp: '0', dependent: '' },
      },
    ])

    // 动态数据
    const dateColumns = ref([]) // 三列日期数据
    const scoresData = ref([]) // 所有评分数据
    const totalScores = ref([]) // 三列总评分
    const signatures = ref([]) // 三列签名

    // 格式化日期显示
    const formatDate = (dateString) => {
      if (!dateString) return ''
      const date = new Date(dateString)
      return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date
        .getDate()
        .toString()
        .padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date
        .getMinutes()
        .toString()
        .padStart(2, '0')}`
    }

    // 获取对应日期的评分
    const getScore = (itemId, dateIndex) => {
      const dateData = scoresData.value[dateIndex]
      if (!dateData) return '0'
      const itemScore = dateData.scores.find((score) => score.itemId === itemId)
      return itemScore ? itemScore.value : '0'
    }

    // 从API获取数据
    const fetchAssessmentData = async () => {
      try {
        // 模拟API请求 - 实际项目中替换为真实API调用
        const response = await axios.get('/api/assessment-data')

        // 假设返回数据结构为:
        // {
        //   dates: ["2025-05-15T05:47:00", "2025-05-16T08:30:00", "2025-05-17T10:15:00"],
        //   scores: [
        //     { itemId: 1, value: "0" }, { itemId: 2, value: "0" }, ...
        //   ],
        //   totals: [0, 0, 0],
        //   signatures: ["倪苗苗", "张三", "李四"]
        // }

        dateColumns.value = response.data.dates.slice(0, 3) // 只取前3个日期
        scoresData.value = response.data.scores.slice(0, 3) // 只取前3组评分
        totalScores.value = response.data.totals.slice(0, 3) // 只取前3个总评分
        signatures.value = response.data.signatures.slice(0, 3) // 只取前3个签名
      } catch (error) {
        console.error('获取评估数据失败:', error)
        // 设置默认数据
        dateColumns.value = [
          new Date().toISOString(),
          new Date(Date.now() - 86400000).toISOString(),
          new Date(Date.now() - 172800000).toISOString(),
        ]
        totalScores.value = ['0', '0', '0']
        signatures.value = ['倪苗苗', '倪苗苗', '倪苗苗']
      }
    }

    onMounted(() => {
      fetchAssessmentData()
    })

    return {
      assessmentItems,
      dateColumns,
      totalScores,
      signatures,
      formatDate,
      getScore,
    }
  },
}
</script>

<style scoped>
.mt-5 {
  margin-top: 36px;
}

.f-12 {
  font-size: 12px;
}

.assessment-table-container {
  width: 100%;
  overflow-x: auto;
}

.assessment-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 14px;
}

.assessment-table th,
.assessment-table td {
  border: 1px solid #000;
  padding: 8px 12px;
  text-align: center;
}

.assessment-table th {
  background-color: #f5f5f5;
  font-weight: bold;
}

.assessment-table tfoot td {
  font-weight: bold;
}
</style>
